<template>
  <div>
    <nut-popup position="bottom" closeable round :custom-style="{ padding: '30px 0' }" v-model:visible="show">
      <div p-36rpx pb-10rpx>
        <div font-bold>{{ props.title || '取消订单' }}</div>
        <div my-40rpx>
          <nut-radio-group direction="horizontal" v-model="cancelReason">
            <nut-radio v-for="(item, index) in cancelReasonList" :key="index" shape="button" :label="item.reason"
              size="large">{{ item.reason }}</nut-radio>
          </nut-radio-group>
        </div>
        <div pt-40rpx>
          <nut-button block type="primary" @click="submit" :loading="props.loading">提交</nut-button>
        </div>
      </div>
    </nut-popup>
  </div>
</template>

<script setup lang="ts">
import { getClearReason } from '@/api/after-sale';

const show = ref<boolean>(false)
const cancelReason = ref<any>('')
const cancelReasonList = ref<any>([])
const props = defineProps<{
  loading: boolean,
  type: string,
  title: string
}>()


const emit = defineEmits(['click'])
async function init() {
  const res = await getClearReason(props.type || 'CANCEL')
  if (res.data.success) {
    cancelReasonList.value = res.data.result
  }
}

defineExpose({
  show,
})
const submit = async () => {
  if (!cancelReason.value) {
    uni.showToast({
      title: '请选择取消原因',
      icon: "none"
    })
  } else {
    emit('click', cancelReason.value)
  }
}
onMounted(() => {
  init()
})



</script>

<style scoped>
</style>
